<template>
  <div class="box">
    <div class="left">
      <el-row class="ding" type="flex" style="margin-top:20px" justify="space-between">
        <div class="top-wr top">
          <el-row>
            <div class=" title">园区数据</div>
          </el-row>
          <el-row class="info" type="flex" justify="space-between">
            <el-row>
              <div class="top-tit">年度累计收费（元）</div>
              <div class="top-txt">{{ list. annualIncome }}</div>
            </el-row>
            <el-row>
              <div class="top-tit">入驻企业总数（个）</div>
              <div class="top-txt">{{ list.enterpriseTotal }}</div>
            </el-row>
            <el-row>
              <div class="top-tit">月卡车辆总数（辆）</div>
              <div class="top-txt">{{ list.monthCardTotal }}</div>
            </el-row>
            <el-row>
              <div class="top-tit">一体杆总数（台）</div>
              <div class="top-txt">{{ list.chargePoleTotal }}</div>
            </el-row>
          </el-row>
        </div>

      </el-row>

      <el-row class="tu-main" type="flex" justify="space-between">
        <div class="tu-box">
          <div class="title">年度收入统计</div>
          <div id="main" ref="boxRef" style="width: 100%;height:300px;margin-top:10px" />
        </div>

      </el-row>

      <el-row class="tu-main" type="flex" justify="space-between">
        <div class="tu-box">
          <div class="title">临期合同提醒</div>
          <el-table size="medium" :data="HomeList">
            <el-table-column
              label="序号"
              type="index"
            />
            <el-table-column prop="enterpriseName" label="企业名称" />
            <el-table-column prop="buildingName" label="租赁楼宇" />
            <el-table-column prop="buildingName" label="租赁时间">
              <template />
            </el-table-column>
            <el-table-column label="操作">
              <template>
                <el-button type="text">续签</el-button>
                <el-button type="text">退租</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :page-sizes="[10,20,50,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
            @size-change="handleSizeChange"
            @current-change="onDistrictAPI"
          />
        </div>
      </el-row>

    </div>

    <div class="right" style="margin:20px 0  0 20px">
      <div class="open">
        <div style="font-size:14px; margin-bottom:30px">快捷入口</div>
        <el-row type="flex" justify="space-between">
          <div class="cs-item">
            <img class="cs-img" src="/src/assets/common/添加.png">
            <div>添加企业</div>
          </div>
          <div class="cs-item">
            <img class="cs-img" src="/src/assets/common/员工.png">
            <div>添加员工</div>
          </div>
          <div class="cs-item">
            <img class="cs-img" src="/src/assets/common/账单.png">
            <div>添加账单</div>
          </div>
          <div class="cs-item">
            <img class="cs-img" src="/src/assets/common/数据大屏.png">
            <div>数据大屏</div>
          </div>

        </el-row>
      </div>

      <div class="wor">
        <div style="title">设备告警派单</div>

        <button class="btn">更多...</button>
      </div>
    </div>

  </div>
</template>

<script>
import { HomeInfoAPI, getDashboardAPI, getYearAPI } from '@/api/dashboard'
import * as echarts from 'echarts'

export default {
  data() {
    return {
      list: [],
      homeData: {},
      social: '',
      HomeList: [],
      page: 1,
      pageSize: 10
    }
  },
  watch: {
    homeData() {
      this.social.setOption({
        legend: {
          data: ['物业费', '行车收入'],
          left: '10%'
        },
        tooltip: {
          trigger: 'axis'
        },

        xAxis: [
          {
            type: 'category',
            data: this.homeData.xmonth
          }
        ],
        yAxis: {},
        series: [
          {
            name: '物业费',
            type: 'bar',
            barWidth: '30%',
            stack: 'one',
            data: this.homeData.ybuilding
          },
          {
            name: '行车收入',
            type: 'bar',
            barWidth: '30%',
            stack: 'one',
            data: this.homeData.yparking
          }
        ]
      })
    }
  },
  created() {
    this.onload()
  },
  mounted() {
    this.social = echarts.init(this.$refs.boxRef)
  },
  methods: {
    async onload() {
      const res = await getDashboardAPI()
      console.log(res)
      this.list = res.data
      const { data } = await getYearAPI()
      console.log(data, 111)
      this.homeData = data.annualIncomeArray
      const re = await HomeInfoAPI({ page: this.page, pageSize: this.pageSize })
      console.log(re)
      this.HomeList = re.rentAdvent
    },
    // 分页功能
    onDistrictAPI(page) {
      this.page = page
      this.onLoad()
    },

    // 每页条数改变
    handleSizeChange(val) {
      this.pageSize = val
      this.onload()
    }
  }

}
</script>

<style scoped>

  .box {
    display: flex;
    width: 100vw;
    height: 100vh;
    padding: 0 20px;
    background: rgb(244,246,248);
  }
  .title {
    font-size: 14px;
  }
  .top-tit{
    margin: 30px 0 20px;
    color: #909399;
  }
  .top {
    padding: 15px 15px;
    width: 1200px;
    height: 150px;
    background-color: #fff;
  }
  .top-txt {
    font-weight: 700;
    font-size: 24px;
  }

  .open {
    width: 435px;
    height: 150px;
    padding:15px 15px;
    background: #fff;
  }
  .cs-img {
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
  }

  .cs-item {
    font-size: 12px;
    cursor: pointer;
  }
  .echarts{
    height: 300px;
  }
  .tu-box {
    margin-top: 16px;
    width: 1200px;
    height: 380px;
    padding: 15px 15px;
    background: #fff;
  }
  .wor {
    margin-top: 16px;
    width: 435px;
    height: 270px;
    padding:15px 15px;
    background: #fff;
  }
  .wor {
    position: relative;
  }
  .btn {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%);
    background-color: rgb( 71,112,255);
    height: 36px;
    width: 80%;
    border-radius: 18px;
    color: #fff;
    line-height: 36px;
    border: none;
    cursor: pointer;
  }
</style>

